<template>
	<div class="main-content">
		<div class="information-form">
			<h3>楼盘动态详情</h3>
			<ul class="housing-list">
				<li>
					<div class="list-info-template col-md-6">
						<label class="control-label" for="">楼盘动态标题:</label>
						<div class="control-details">
							<input type="text" name="title" class="form-control" style="width:50%" placeholder="楼盘动态标题" v-model="dynamic.title">
						</div>
					</div>
				</li>
				<li>
					<div class="list-info-template col-md-6">
						<label class="control-label" for="">楼盘名称:</label>
						<div class="control-details">
							<select id="premisesNameIds" class="form-control" style="width:30%" name="premisesId" v-model="dynamic.premisesId" v-bind:disabled="dynamic.isBindingV10==='已推送'?true:false">
		                        <option v-for="row in premisesList" v-bind:value="row.id">{{row.name}}</option>
							</select>
              
						</div>
					</div>
				</li>
				<li>
					<div class="list-info-template col-md-6">
						<label class="control-label" for="">是否展示:</label>
						<div class="control-details">
							<label><input type="radio" name="canSee1" value="true" checked="option.ischeck" v-model="dynamic.canSee">是</label>
							<label><input type="radio" name="canSee1" value="false" checked="option.nocheck"  v-model="dynamic.canSee">否</label>
						</div>
					</div>
				</li>
        <li>
          <div class="list-info-template col-md-6">
            <label class="control-label" for="">是否推送V10:</label>
            <div class="control-details">
              <p id= "bindingV10" class="ellipsis" v-text="dynamic.isBindingV10"></p>
            </div>
          </div>
        </li>
				<!-- <li>
					<div class="list-info-template col-sm-12">
						<label class="control-label" for="">动态简介:</label>
						<div class="control-text" style="height: 270px"> -->
							<!--<vue-editor id="remark" v-model="dynamic.remark"></vue-editor>-->
							<!-- <quill-editor  id="remark" v-model="dynamic.remark" :options="editorOptionEdit"></quill-editor>
						</div>
					</div>
				</li> -->
				<li>
					<div class="list-info-template col-sm-12">
						<label class="control-label" for="">动态内容:</label>
						<div class="control-text" style="height: 270px">
							<!--<vue-editor id="content" v-model="dynamic.content"></vue-editor>-->
							<quill-editor  id="content" v-model="dynamic.content" :options="editorOptionEdit"></quill-editor>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="list-info-template col-sm-10" style="padding-top:20px;padding-bottom:20px;text-align:center;">
			<input type="button" class="btn checkedBtn" style="width:110px" @click="savePremises" value="保存">
			<button type="button" class="btn btn-default" style="margin-left:20px;width:110px" @click="goBack">返回</button>
		</div>
		<input type="file" id="iviewUpEdit" @change="textImageUpload" style="display: none" />
	</div>

</template>

<script>
	import {VueEditor} from 'vue2-editor'
	import calendar from "../common/calendar.vue"
	const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'code-block'],

        [{'header': 1}, {'header': 2}],               // custom button values
        [{'list': 'ordered'}, {'list': 'bullet'}],
        [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
        [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
        [{'direction': 'rtl'}],                         // text direction

        [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
        [{'header': [1, 2, 3, 4, 5, 6, false]}],

        [{'color': []}, {'background': []}],          // dropdown with defaults from theme
        [{'font': []}],
        [{'align': []}],
        ['link', 'image', 'video'],
        ['clean']                                         // remove formatting button
    ]
	export default {
		data() {
			let _self = this;
			return {
                editorOption: {
                    placeholder: '请输入内容'
                },
				dynamic: {},
				premisesList: [],
				option:{
					ischeck:true,
					nocheck:false
				},
				quillsDynaEdit:'',
                editorOptionEdit: {
                    placeholder: '请输入内容',
                    theme: 'snow',  // or 'bubble'
                    modules:{
                        toolbar:{
                            container: toolbarOptions,  // 工具栏
                            handlers: {
                                // handlers object will be merged with default handlers object
                                image: function (value,e) {
                                    if (value) {
                                        document.getElementById('iviewUpEdit').click()
                                        _self.quillsDynaEdit = this.quill;
                                    } else {

                                    }
                                }
                            }
                        }
                    },

                }
			}
		},
		components: {
			VueEditor,
			calendar
		},
		mounted: function() {
			this.initDynamic();
			this.initPremisesList();
		},
		methods: {
			initDynamic() {
				var _self = this;
				var body={};
				body.params = {
					id: _self.$route.params.id
				};
				var url = _self.utilHelper.apiUrl + "/api/getPremisesDynamicDetail";
				this.$http.post(url, body).then((response) => {
					var resData = response.body.resData;
					if(resData.result == "1"){
						_self.dynamic = resData.premisesDynamic;
						if (_self.dynamic.canSee == true) {
							_self.option.ischeck = true;
							_self.option.nocheck = false;
						}else {
							_self.option.ischeck = false;
							_self.option.nocheck = true;
						}
					}
				}, (response) => {
					console.log(response);
				});
			},
			initPremisesList() {
				var _self = this;
				var body={};
				body.params = {};
				var url = _self.utilHelper.apiUrl + "/api/getPremisesListByCompanyId";
				this.$http.post(url, body).then((response) => {
					var resData = response.body.resData;
					if(resData.result == "1"){
						_self.premisesList = resData.premisesList;
						
					}
				}, (response) => {
					console.log(response);
				});

			},
			savePremises(){
		    	var _self = this;
                var url = _self.utilHelper.apiUrl+'/api/editPremisesDynamic';
                _self.$http.post(url, _self.setParams()).then((response)=>{
					var resData = response.body.resData;
					if(resData.result == "1"){
						layer.msg("保存成功")
						setTimeout(this.goBack,2000);
					}else{
						layer.msg("保存失败");
					}
				},(response)=>{
					layer.msg(response);
				});
		   },
		   //组装待提交字段
		   setParams(){
		   		var body = {};
                body.params = {
                	id: this.$route.params.id,
                	premisesId: this.dynamic.premisesId,
                	content: encodeURIComponent(this.dynamic.content),
                	remark: encodeURIComponent(this.dynamic.remark),
                	canSee: this.dynamic.canSee,
                	title: this.dynamic.title
                }
                return body;
            },goBack(){
		   		this.$router.replace({
					path: '/premisesDynamic'
				})
			},
			textImageUpload(e) {
			  var _self = this;
			  var files = e.target.files || e.dataTransfer.files;
			  var imgData;
			  var reader = new FileReader();
			  reader.readAsDataURL(files[0]);
			  reader.onload = function (theFile) {
				var image = new Image();
				image.src = theFile.target.result;
				image.onload = function () {
				  //图片大于1980不允许上次，大于1080会在后端修改为1080
				  if (image.width > 1980) {
					layer.msg("图片宽度太大，请上传宽度小于1980像素的图片", {
					  time: 3000
					});
					return false;
				  }
				  if (files[0].size > 3145728) {
					layer.msg("图片太大，请上传小于3M的图片");
					return;
				  }
				  var lod = layer.load(0, { shade: [0.1, "#000"] }); //弹出加载层
				  var myForm = new FormData(); //创建formdata
				  myForm.append("blobObject", files[0]); //想formData添加blob数据
				  var url = _self.utilHelper.apiUrl + "/api/dynamicUploadBase64";
				  _self.$http.post(url, myForm).then(
					(response) => {
					  layer.closeAll("loading"); //关闭加载层
					  var data = response.body;
					  if (data.result == "1") {
						let url = data.resData.imgName;
						let length = _self.quillsDynaEdit.getSelection().index;
						_self.quillsDynaEdit.insertEmbed(length, "image", url);
						// 调整光标到最后
						_self.quillsDynaEdit.setSelection(length + 1);
					  } else {
						layer.msg("图片上传失败，请重试");
					  }
					  document.getElementById("iviewUpEdit").value = "";
					  layer.close(lod);
					},
					(response) => {
					  layer.msg(response);
					  layer.close(lod);
					}
				  );
				};
			  };
			}
		}
	}
</script>

<style>
  #remark, #content{
    height: 200px;
  }
</style>